<template>
	<view>
		<!-- 头部 -->
		<view class="top">更换手机号</view>
		<view class="box">
			<view class="phone">当前手机号：</view>
			<view class="list">
				<view class="item">
					<view class="input">
						<input type="text" value="" placeholder="绑定的手机号码" />
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="codeIput">
						<input class="codeNum" type="text" value="" placeholder="请输入验证码" />
					</view>
					<view class="code font-num">获取验证码</view>
				</view>
			</view>
			<view class="btn">确认绑定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 返回上一页
			goUserInfo() {
				uni.$showMsg("暂时还不能换绑手机号，敬请期待！");
				setTimeout(() => {
					uni.navigateBack({
						delta: 1, //返回层数，2则上上页
					})
				}, 1800);
			}
		},
		onLoad() {
			// 设置绑定手机页面title
			uni.setNavigationBarTitle({
				title: "绑定手机号"
			});
			this.goUserInfo();
		}
	}
</script>

<style>
	/* 头部 */
	.top {
		width: 100%;
		height: 100rpx;
		background-color: white;
		line-height: 100rpx;
		text-align: center;
	}

	.box {
		width: 650rpx;
		height: 600rpx;
		margin: 30rpx auto;
		background-color: white;
		border-radius: 8px;
	}

	.box .phone {
		font-size: 17px;
		font-weight: 700;
		text-align: center;
		padding-top: 29px;
	}

	.box .list {
		width: 500rpx;
		margin: 28px auto 0 auto;
	}

	.box .list .item {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
	}

	.box .list .item .input input {
		padding: 10rpx 0 0 0;
		font-size: 12px;
	}

	.acea-row {
		justify-content: space-between;
	}

	.codeNum {
		font-size: 12px;
		width: 150rpx;
	}

	.box .list .item .code {
		font-size: 14px;
		color: rgba(29, 176, 252, 1);
		background-color: #fff;
	}

	.box .btn {
		width: 500rpx;
		font-size: 17px;
		height: 90rpx;
		color: white;
		border-radius: 24px;
		color: #fff;
		margin: 60rpx auto 0 auto;
		text-align: center;
		line-height: 48px;
		background-color: rgba(29, 176, 252, 1);
	}
</style>